/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js,vue}"],
    theme: {
        extend: {
            animation: {
                "accordion-down": "accordion-down 0.2s ease-out",
                "accordion-up": "accordion-up 0.2s ease-out",
                "collapsible-down": "collapsible-down 0.2s ease-in-out",
                "collapsible-up": "collapsible-up 0.2s ease-in-out",
                float: "float 5s linear 0ms infinite"
            },
            keyframes: {
                'accordion-down': {
                    from: {height: '0'},
                    to: {height: 'var(--radix-accordion-content-height)'},
                },
                'accordion-up': {
                    from: {height: 'var(--radix-accordion-content-height)'},
                    to: {height: '0'},
                },
                'collapsible-down': {
                    from: {height: '0'},
                    to: {height: 'var(--radix-collapsible-content-height)'},
                },
                'collapsible-up': {
                    from: {height: 'var(--radix-collapsible-content-height)'},
                    to: {height: '0'},
                },
                float: {
                    '0%': {transform: 'translateY(0)'},
                    '50%': {transform: 'translateY(-20px)'},
                    '100%': {transform: 'translateY(0)'},
                },
            },
            boxShadow: {float: `0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%)`,},
            zIndex: {
                '100': '100',
                '1000': '1000',
            },
        },
    },
    plugins: [],
}